<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIUI登录系统</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/js/vue.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 600px; background-image: url('../static/img/暮色.jpg');background-size: cover; margin: 50px auto auto; padding: 50px">
    <div  style="margin: 0 auto;width: 300px;">
        <h4 style="text-align: center; margin-bottom: 40px;color: #ffffff">MIUI登录</h4>
        <button class="btn btn-outline-info" style="width: 147px;" id="userLogin">账号密码登录</button>
        <button class="btn btn-outline-info" style="width: 148px;" id="mobileLogin">手机号登录</button>
        <div style="margin: 0 auto;width: 300px;" id="content">

            <label for="usr" class="form-label" style="margin-top: 35px;color: #20c997">用户名:</label>
            <input type="text" name="username" placeholder="请输入用户名" id="usr" class="form-control" style="width: 300px;margin: 5px 0;">
            <label for="paw" class="form-label" style="margin-top: 15px;color: #20c997">密码:</label>
            <input type="password" name="password" placeholder="请输入密码" id="paw"  class="form-control" style="width: 300px;margin: 5px 0;">
            <div style="margin-top: 15px;">
                <a href="http://laojiequ.cn/update">忘记密码？</a>
                <a href="http://laojiequ.cn/registerForm" style="float:right;">注册</a>
            </div>
            <div style="text-align: center;margin-top: 25px;font-size: 11px;">
                <input type="checkbox" id="is_check"><span >我已阅读并同意 <a href="http://baidu.com">《用户服务协议》</a>和 <a href="http://baidu.com">《隐私政策》</a> </span>
            </div>
            <button  class="btn btn-outline-dark" style="margin-top: 5px;width: 100px;float:right;" id="usrLogin">登录</button>

        </div>
    </div>
</div>
</body>
</html>

<script>
    $("#mobileLogin").click(function (){
        $("#content").html( "<label for=\"mobile\" class=\"form-label\" style=\"margin-top: 35px;color: #20c997\">手机号:</label>\n" +
            "        <input type=\"text\" name=\"mobile\" placeholder=\"请输入手机号\" id=\"mobile\" class=\"form-control\" style=\"width: 300px;margin: 5px 0;\">\n" +
            "        <label for=\"sms\" class=\"form-label\" style=\"margin-top: 15px;color: #20c997;display: block\">验证码:</label>\n" +
            "        <input type=\"text\" name=\"sms\" placeholder=\"请输入验证码\" id=\"sms\"  class=\"form-control\" style=\"width: 200px;margin: 5px 0; display:inline-block\">\n" +
            "<button style=\"width: 95px;margin-bottom: 5px;\" id=\"code\" class=\"btn btn-outline-dark\">验证码</button> \n"+
            "        <div style=\"margin-top: 10px;\">\n" +
            "            <a href=\"http://127.0.0.1:8080/registerForm\"  style=\"float:right;\">注册</a>\n" +
            "        </div>\n" +
            "        <div style=\"text-align: center;font-size: 11px;clear:both;margin-top: 30px;\">\n" +
            "            <input type=\"checkbox\" id='is_check'><span >我已阅读并同意 <a href=\"http://baidu.com\">《用户服务协议》</a>和 <a href=\"http://baidu.com\">《隐私政策》</a> </span>\n" +
            "        </div>\n" +
            "        <button  class=\"btn btn-outline-light\"  style=\"margin-top: 10px;width: 100px;float:right;\" id=\"telLogin\" >登录</button>\n")
    })

    $("#userLogin").click(function (){
        $("#content").html("<label for=\"usr\" class=\"form-label\" style=\"margin-top: 35px;color: #20c997\">用户名:</label>\n" +
            "            <input type=\"text\" name=\"username\" placeholder=\"请输入用户名\" id=\"usr\" class=\"form-control\" style=\"width: 300px;margin: 5px 0;\">\n" +
            "            <label for=\"paw\" class=\"form-label\" style=\"margin-top: 15px;color: #20c997\">密码:</label>\n" +
            "            <input type=\"password\" name=\"password\" placeholder=\"请输入密码\" id=\"paw\"  class=\"form-control\" style=\"width: 300px;margin: 5px 0;\">\n" +
            "            <div style=\"margin-top: 15px;\">\n" +
            "                <a href=\"http://127.0.0.1:8080/updatePaw\">忘记密码？</a>\n" +
            "                <a href=\"http://127.0.0.1:8080/registerForm\" style=\"float:right;\">注册</a>\n" +
            "            </div>\n" +
            "            <div style=\"text-align: center;margin-top: 25px;font-size: 11px;\">\n" +
            "                <input type=\"checkbox\" id=\"is_check\"><span >我已阅读并同意 <a href=\"http://baidu.com\">《用户服务协议》</a>和 <a href=\"http://baidu.com\">《隐私政策》</a> </span>\n" +
            "            </div>\n" +
            "            <button  class=\"btn btn-outline-dark\" style=\"margin-top: 5px;width: 100px; float:right;\" id=\"usrLogin\">登录</button>")
    })

    $("#usrLogin").click(function () {
        var  username = $("#usr").val()
        var  password = $("#paw").val()
        var agreement = document.getElementById("is_check")
        if (username === ""|| password===""){
            alert("用户名或密码不能为空")
            return
        }
        if (!agreement.checked) {
            alert("请阅读并勾选！")
            return
        }
        $.ajax({
            url:"/login",
            data: {
                "username": username,
                "password": password,
            },
            type: "POST",
            dataType: "json",
            success: function (data){
                console.log(data)
                if (data.code!==200){
                    alert(data.message)
                    return
                }
                alert(data.message)
                location.href="http://laojiequ.cn/list"
            },
            error: function (){
                alert("请求超时!!!")
            }

        })
    })

    $("#code").click(function (){
        alert(1236543)
        var mobile = $("#mobile").value()
        if (mobile === ""){
            alert("手机号不能为空")
            return
        }
        $.ajax({
            url: "/sendSms",
            data: {
                "mobile":mobile,
            },
            type: "POST",
            dataType: "json",
            success: function (data){
                console.log(data)
                if (data.code!==200){
                    alert(data.message)
                    return
                }
                alert(data.message)
            },
            error: function (){
                alert("请求超时!!!")
            }
        })
    })

    $("#telLogin").click(function () {
        alert(123)
        var  mobile = $("#mobile").val()
        var  sms = $("#sms").val()
        var agreement = document.getElementById("is_check")
        if (mobile === ""||sms===""){
            alert("手机号不能为空")
            return
        }

        if (!agreement.checked) {
            alert("请阅读并勾选！")
            return
        }

        $.ajax({
            url:"/login",
            data: {
                "sms": sms,
                "mobile": mobile,
            },
            type: "POST",
            dataType: "json",
            success: function (data){
                console.log(data)
                if (data.code!==200){
                    alert(data.message)
                    return
                }
                alert(data.message)
                location.href="http://laojiequ.cn/list"
            },
            error: function (){
                alert("请求超时!!!")
            }

        })
    })
</script>